<!DOCTYPE html>
<html lang="zh-cn">
<head>
<!--    写于2022年5月20日0点12分-->
    <meta charset="UTF-8">
    <title> 动画移动2</title>
    <script>
        window.addEventListener("load",function () {
        let button1=document.querySelector(".button1");
        //按钮一 回来
        // 获取 元素  document.querySelector;
        let button2=document.querySelector(".button2");
        // 按钮二 快跑！
        // 获取 元素  document.querySelector;
        let box1 =document.querySelector(".box1");
        let box2 =document.querySelector(".box2");
            function animationMove(obj,finalPosition,stopFunction){
                //animationMove  动画移动！  obj  对象！ //finalPosition 最终位置 //stopFunction 回调函数
                clearInterval(obj.timer);
                // 上面这行代码很重要！
                // 这行代码一定要放在 定时器的上面
                // 如果连续点击 开始按钮我们的程序就会出现bug  所有我们在这里 加上一个 结束语句 就可以很好避免bug
                //因为 当同一个名称传进来的时候 就会先结束她 然后再启动她 就不会有印象了！
                obj.timer=setInterval(animation,15);
                function animation(){
                    // 这里的 定时器我们一个 使用重复定时器！
                    if(obj.offsetLeft===finalPosition){
                        //  这个 判断语句 必须放在 这个函数里面 每次循环 都来判断一下！
                        clearInterval(obj.timer);
                    //    会掉函数是 在 调用回调函数的对象执行完毕以后 才开始执行的 所以我们把回调函数放到  停止定时器以后去执行
                        if(stopFunction){
                            // 我们先判断 stopFunction 回调函数是否存在
                            stopFunction();
                        }
                        return;
                    }
                    let remainingDistance=(finalPosition-  obj.offsetLeft)/10;
                    // 这里可以进行分布运算  详细解析：第一次先：走十分之一  第二次走剩下的十分之一 以此类推！
                    remainingDistance=   remainingDistance>0?(Math.ceil(remainingDistance)):(Math.floor(remainingDistance));
                    //这里我们要进行取整： 剩余距离大于0是我们向上取整(Math.ceil)  剩余距离小于0我们向下取整(Math.floor);
                    obj.style.left=obj.offsetLeft+remainingDistance+"px";
                    // 上面三行代码用于处理变速移动动画！

                    // obj.offsetLeft>finalPosition?(obj.style.left=obj.offsetLeft-1+"px"):(obj.style.left=obj.offsetLeft+1+"px");
                    //  上面这行代码可以使用 目标对象 来回移动 即我们可以使 目标对象 进行正向移动 或反向移动！
                    console.log(obj.offsetLeft);
                        //    要是有 动画效果必须 给调用对象 添加定位！
                }
            }
            animationMove(box1,205);
            button1.addEventListener("click",function (){
                // 这里是给 按钮绑定 事件
                animationMove(box2,0);
            })

            button2.addEventListener("click",function (){
                // 这里是给 按钮绑定 事件
                animationMove(box2,1200);
            })
        })
    </script>

    <style>
        .button1{
        background-color: red;
        }
        .button2{
        background-color: deepskyblue;
        }
        div{
            /* 当我们要给 对象添加动画的时候 我们必须给对象添加 绝对定位！*/
            position: absolute;
            /*绝对定位！*/
            background-color: #a8ffa9;
            width:100px;
            height:100px;
        }
        .box2{
            margin-top: 100px;
            background-color: #FCCECEFF;
            width:200px;
            height:200px;
        }
    </style>
</head>
<body>
<button class="button1">回来</button>
<button class="button2">快跑</button>
<div class="box1"> 无名之辈</div>
<div class="box2"> 无名小卒</div>
</body>
</html>